import React, { PureComponent, PropTypes } from 'react';

import IECharts from '../common/IECharts';

export default class MixedEaringChart extends PureComponent {
  static propTypes = {
    assetData: PropTypes.object.isRequired,
  }

  constructor(props) {
    super(props);
  }

  _max2wholeTen(arr) {
    const v = Math.max(...arr);
    return this.getAxisValue(v / 10) * 10;
  }

  _min2wholeTen(arr) {
    const v = Math.min(...arr);
    return this.getAxisValue(v / 10) * 10;
  }

  getAbsMax(v1, v2) {
    return Math.round(Math.max(Math.abs(+v1), Math.abs(+v2)));
  }

  getAxisValue(v) {
    let rv = 0;
    if (v !== rv) {
      rv = v > 0 ? Math.ceil(v) : Math.floor(v);
    }
    return rv;
  }

  generateDaysByYear(year) {
    const condt1 = year % 4 === 0;
    const condt2 = year % 100 !== 0;
    const condt3 = year % 400 === 0;
    const condt = condt1 && condt2 || condt3;
    const dateArr = [];
    for (let i = 1; i <= 12; i++) {
      let d = 31;
      if ([4, 6, 9, 11].indexOf(i) > -1) {
        d = 30;
      } else if (i === 2) {
        d = condt ? 29 : 28;
      }
      for (let j = 1; j <= d; j++) {
        dateArr.push(`${year}-${i}-${j}`);
      }
    }
    return dateArr;
  }

  _yAxis(arr) {
    const v_max = Math.max(...arr);
    const v_min = Math.min(...arr);
    return {
      min: 2 * v_min,
      max: 2 * v_max,
    };
  }

  getInterval(v1, v2) {
    for (let i = 3; i < 100; i++) {
      if ((v1 + v2) % 1 === 0) {
        return i;
      }
    }
  }

  render() {
    const { assetData: { data_mix, data_base, data_diff, data_date } } = this.props;
    // const data_diff = [];
    // for (let i=0; i<data_mix.length; i++) {
    //   data_diff[i] = (data_mix[i] - data_base[i]).toFixed(2);
    // }
    const yAxisMin = this._yAxis([...data_mix, ...data_base]).min;
    const yAxisMax = this._yAxis([...data_mix, ...data_base]).max;
    const chartCommonOptions = {
      title: {
        text: '混合收益',
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%',
      },
      color: ['rgb(236,204,77)', 'rgb(253,52,94)', 'rgb(48,132,193)'],
      legend: {
        data: ['组合', '基准', '超额'],
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        // data: this.generateDaysByYear(2017)
        data: data_date,
      },
      yAxis: [
        {
          name: '累计收益率(%)',
          nameLocation: 'middle',
          nameGap: '35',
          boundaryGap: [0, '100%'],
          type: 'value',
          // min: this._min2wholeTen([...data_mix, ...data_base]),
          // max: this._max2wholeTen([...data_mix, ...data_base]),
          // min: yAxisMin,
          // max: yAxisMax,
          // interval: this.getInterval(yAxisMin, yAxisMax)
        },
        {
          name: '超额收益率(%)',
          nameLocation: 'middle',
          nameGap: '35',
          boundaryGap: [0, '100%'],
          type: 'value',
        //   min: this._min2wholeTen(data_diff),
        //   max: this._max2wholeTen(data_diff),
        //   interval: 10
        },
      ],
      series: [
        {
          name: '组合',
          type: 'line',
          data: data_mix,
        },
        {
          name: '基准',
          type: 'line',
          data: data_base,
        },
        {
          name: '超额',
          type: 'line',
          yAxisIndex: 1,
          areaStyle: {
            normal: {
              color: 'rgb(48,132,193)',
            },
          },
          data: data_diff,
        },
      ],
    };

    return (
      <IECharts option={chartCommonOptions} />
    );
  }
}
